<template>
  <div class="home-container">
    <h1 class="home-title flex">技术案例</h1>
    <ul class="main flex-start flex-wrap">
      <li
        class="item"
        v-for="item in caseList"
        :key="item.sort"
        @click="gotoPage(item)"
      >
        {{ item.sort + '.' + item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      caseList: [
        { sort: 1, title: '蚂蚁面试题：实现被框选方块变色' },
        {
          sort: 2,
          title: '实现瀑布流布局',
        },
        {
          sort: 3,
          title: '点击按钮背景滑动',
        },
      ],
    }
  },
  created() {},
  methods: {
    gotoPage(item) {
      this.$router.push({
        path: '/' + item.sort,
        query: { title: item.title },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.home-container {
  .home-title {
    height: 80px;
  }
  .main {
    padding: 30px 80px;

    .item {
      margin: 0 50px 30px 0;
      font-size: 20px;
      cursor: pointer;
    }
    .item:hover {
      color: rgb(12, 161, 230);
      text-decoration: underline;
    }
  }
}
</style>
